<template>
  <div id="app">
      <div class="work" @mousemove="mousemove"  @mouseup="mouseup">
          <left-tab class="leftTab" :style="{flex: leftTabFlex}" :example="example" :describe="describe"></left-tab>
          <div class="col_line"  @mousedown="mousedown" :class="{gray: isGray}"
               @mouseup="mouseup" @mousemove="lineMouseOver"
               @mouseout="lineMoverOut"></div>
          <div class="rightDiv" :style="{flex: codeMirrorFlex}">
              <codemirror id="codeinput" v-model="code" :options="cmOptions" ></codemirror>

              <div class="bottom">
                  <textarea class="console" v-model="consoleContent" v-show="consoleIsShow"></textarea>
                  <div class="work_bottom" >
                      <p style="" @click="consoleIsShow = !consoleIsShow" class="btn btn-info">控制台</p>
                      <p style="float: right; margin-right: 20px" @click="submit" class="btn btn-info">提交</p>
                      <p style="float: right; margin-right: 20px" @click="executeMethod" class="btn btn-info">执行代码</p>
                  </div>
              </div>
          </div>

      </div>



  </div>
</template>

<script>
import Vue from 'vue'
import VueCodemirror from 'vue-codemirror'
import constant from "@/constants/constant";
import qs from 'qs'
import 'bootstrap/dist/js/bootstrap.js'
import 'bootstrap/dist/css/bootstrap.css'


// codemirror style
import 'codemirror/lib/codemirror.css'
// keymap
import 'codemirror/keymap/sublime.js'
// java
import 'codemirror/mode/clike/clike.js'
// theme
import 'codemirror/theme/base16-dark.css'

// 代码提示
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import LeftTab from "@/components/leftTab";


Vue.use(VueCodemirror, /* {
options: { theme: 'base16-dark', ... },
events: ['scroll', ...]
} */)



export default {
  name: 'app',
  components: {
      LeftTab
  },
  created() {
      console.log("fuck me")
      this.$axios.post(constant.BASE_URL + "getSubject?subjectId=1")
          .then(response => {
              console.log(response.data)
              const data = response.data
              this.describe = data.describe
              console.log("describe:" + data.describe)
              this.example = data.example
              this.code = data.initcode

          })
          .catch(function (error) {
              consle.log("error:" + erro)
          })
  },
  data () {
      return {
          example: "",
          describe: "",
          consoleIsShow: true,
          isGray: false,
          leftTabFlexNum: 0.4,
          codeMirrorFlexNum: 1,

          code: 'public class Main {\n' +
              '            public static void main(String[] args){\n' +
              '              System.out.println("hello world!");\n' +
              '            }\n' +
              '}',
          consoleContent: 'hello\nfuck',
          cmOptions: {
              tabSize: 2,
              styleActiveLine: true,
              lineNumbers: true,
              line: true,
              foldGutter: true,
              styleSelectedText: true,
              mode: 'text/x-java',
              keyMap: "sublime",
              matchBrackets: true,
              showCursorWhenSelecting: true,
              theme: "base16-dark",
              extraKeys: { "Alt-/": "autocomplete" },
              autofocus:true
          },
          enableMove: false,// 是否允许移动

      }
  },

  computed: {
      leftTabFlex() {
          return this.leftTabFlexNum + " 0 0px"
      },
      codeMirrorFlex() {
          return this.codeMirrorFlexNum + " 0 0px"
      }
  },


  methods: {
      lineMouseOver() {
          this.isGray = true

      },
      lineMoverOut() {
          this.isGray =false
      },

      getClientWidth() {
          var winWidth = document.body.clientWidth || document.documentElement.clientWidth
          return winWidth
      },
      mousemove(event) {
          // console.log("mouseover")

          if (this.enableMove) {
              // 根据当前鼠标位置 计算 左边 跟 右边所占的比例
              this.leftTabFlexNum = (event.clientX * (1.4 / this.getClientWidth())) - 0.008
              this.codeMirrorFlexNum = ((this.getClientWidth() - event.clientX) * (1.4 / this.getClientWidth())) + 0.008


          }

      },
      mousedown(event) {

          this.enableMove = true;
      },
      mouseup(event) {
          this.enableMove = false
      },

      showKey(key) {
          console.log(key)
      },
      executeMethod() {
          var data = {
              'javaSource': this.code,
              'subjectId': '1'
          }
          console.log(qs.stringify(data))
          this.$axios.post(constant.BASE_URL + "executeMethod", qs.stringify(data))
              .then(response => {
                  console.log(response.data)
                  const  data = response.data
                  if (data.status == 1) {
                      this.consoleContent = data.info
                  } else {
                      let str = data.info + "\n"
                      str = str + "入参:" + data.input + "\n"
                      str = str + "出参:" + data.output + "\n"
                      str = str + "期待:" + data.expect + "\n"
                      this.consoleContent = str
                  }
                  // const  data = response.data.excuteResult
                  // this.consoleContent = data

              })
              .catch(function (error) {
                  console.log("error:" + error)
              })
          console.log(this.code)
      },
      submit() {
          var data = {
              'javaSource': this.code,
              'subjectId': '1'
          }
          console.log(qs.stringify(data))
          this.$axios.post(constant.BASE_URL + "submit", qs.stringify(data))
              .then(response => {
                  console.log(response.data)
                  const  data = response.data
                  if (data.status == 1) {
                      this.consoleContent = data.info
                  } else {
                      let str = data.info + "\n"
                      str = str + "入参:" + data.input + "\n"
                      str = str + "出参:" + data.output + "\n"
                      str = str + "期待:" + data.expect + "\n"
                      this.consoleContent = str
                  }
                  // const  data = response.data.excuteResult
                  // this.consoleContent = data

              })
              .catch(function (error) {
                  console.log("error:" + error)
              })

      }
  }

}
</script>

<style>
html, body {
    height: 100%;
}

.work_bottom {
    display: block;
    width: 100%;
    height: 100%;

}
.bottom {
    display: block;
    flex: 1 0 auto;
    z-index: 1;
    padding-right: 5px;
    -webkit-box-flex: 1;

}

.gray {
    background-color: #42b983;
}
main {
    position: relative;
}
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /*text-align: center;*/
    color: #2c3e50;
    height: 100%;


}
.work {
    display: flex;
    height: 100%;

}

#codeinput {
    height: 100%;
    z-index: 0;

}
.rightDiv {
    flex: 1 0 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 0;
}

/*不能删除 这是codemirro里面的 class*/
.CodeMirror {
    /*codemirror编辑器的高度设置*/
    height: 100%;
    flex: 1 0 auto;

}
.col_line {
    cursor: col-resize;
    flex: 0 0 10px;
}
.leftTab {
    background-color: lightgray;
}


.console {
    display: block;
    width: 100%;
    font-family: "Microsoft YaHei UI";
    height: 100px;
    border: 1px solid black;
    background-color: black;
    color: ghostwhite;
}
</style>
